
<template>
	<div class="account_zh">
		<!--中间内容-->
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="72px" class="demo-ruleForm">
		  <h4>
		   <span style="font-size:16px;">应用名称:</span> <span style="font-size:16px;">{{this.appName}}</span>
		  </h4>
		</el-form>
		<el-table
		:data="tableData1"
		border
		v-loading="listLoading"
		:header-cell-class-name="tableheaderClassName"
		:row-class-name="tableRowClassName">
		<el-table-column
		prop="interfaceName"
		label="接口名称">
		</el-table-column>
		<el-table-column
		prop="totalAccessSize"
		label="调用次数">
		</el-table-column>
		<el-table-column
		prop="successPercent"
		label="成功率(%)">
		</el-table-column>
		<el-table-column
		prop="avgProcessTime"
		label="平均时长(ms)">
		</el-table-column>
		</el-table>
		<!--底部分页内容-->
		<div class="di">
			<div style="text-align:center;">
				<el-pagination
				background
				layout="prev, pager, next" 
				@current-change="handleCurrentChange" 
				:total="totalDetails" >
				</el-pagination>
			</div>
		</div>
		<hr />
<!--2中间内容2-->
		<h5 style="font-size:18px;">日志查看</h5>
		<el-table
			:data="tableData2"
			style="width:100%; margin:0 auto;"
			border
			v-loading="listLoading"
			:header-cell-class-name="tableheaderClassName"
			:row-class-name="tableRowClassName">
				<el-table-column 
						prop="requestTime"
						label="访问时间">
					</el-table-column>
					<el-table-column
						prop="interfaceName"
						label="接口名称">
					</el-table-column>
					<el-table-column
						prop="status"
						label="状态"
						:formatter='formatter'>
					</el-table-column>
					<el-table-column
						prop="processTime"
						label="耗时(ms)">
					</el-table-column>
		 </el-table>
	<!--底部内容-->
		<div class="di">
			<div style="float:right;width:100%;">
				<el-pagination
					style='text-align: center;'
					background
					layout="prev, pager, next" 
					@current-change="handleCurrentChange2" 
					:total="totalJournal">
				</el-pagination>
			</div>
		</div>	
</div>
</template>
<script>
import util from '../../common/js/date.js';
import {applyDetail, apprizhi, checkLogin} from '../../api/api.js';
//定义一个全局的变量，谁用谁知道
var validPhone=(rule, value,callback)=>{
	if (!value){
		callback(new Error('请输入电话号码'))
	}else  if (!isvalidPhone(value)){
		callback(new Error('请输入正确的11位手机号码'))
	}else {
		callback()
	}
}
export default {
	name:'applyDetail',
	data() {
		return {
			keys:[ ],
			page: 1,
			pageNum: 1,
			appName:'',
			listLoading:false,
			centerDialogVisible:false,
			tableData1: [],
			tableData2: [],
			dialogFormVisible: false,
			dialogFormVisible1: false,
			formLabelWidth: '120px',
			applicationDetails:null,
			pageSize:10,
			totalDetails:0,
			totalJournal:0,
		};
	},
	methods:{
		//获取用户列表
		getUsers() {
			let para = {
				endDate:this.applicationDetails.endDate,
				appId:this.applicationDetails.appId,
				pageNumber:this.page,
				pageSize:this.pageSize,
				startDate:this.applicationDetails.startDate,
			};
			console.log(para);
			this.listLoading = true;
			applyDetail(para).then((res) => {	
				console.log('applyDetail........',res.list);
				this.tableData1 = res.list;
				this.totalDetails=res.count;
				console.log(this.tableData);
				this.listLoading = false;
				
			});
		},
	//获取应用详情日志	
		getUsers2() {
			let para = {
				endDate:this.applicationDetails.endDate,
				appId:this.applicationDetails.appId,
				pageNumber:this.pageNum,
				pageSize:this.pageSize,
				startDate:this.applicationDetails.startDate,
			};
			console.log(para);
			this.listLoading = true;
			apprizhi(para).then((res) => {	
				 console.log('apply日志........',res.list);
				 this.tableData2 = res.list;
				 this.totalJournal=res.count;
				this.listLoading = false;
			});
		},
		// 搜索重置
		reset(formName){
			this.$refs[formName].resetFields();
		},
		// 分页获取
		handleCurrentChange(val) {
			this.page = val;
			this.getUsers();
		},
		// 分页获取
		handleCurrentChange2(val) {
			this.pageNum = val;
			this.getUsers2();
		},
		// 表格样式
		tableRowClassName({rowIndex}) {
			if (rowIndex % 2==0) {
				return 'success-row';
			} else if (rowIndex % 2 !==0) {
				return 'warning-row';
			}
			return '';
		},
//		格式化状态
		formatter(row,column){
			return row.status == 1 ? '访问失败' : '访问成功'
		},
		tableheaderClassName() {
			return "table-head-th";
		},
	},
	mounted() {
		if(checkLogin(this)){
			var self = this;
			// 获取用户
			let applicationDetails = sessionStorage.getItem('applicationDetails');
			if(applicationDetails) {
				applicationDetails = JSON.parse(applicationDetails);
				self.applicationDetails=applicationDetails;
				self.appName = self.applicationDetails.appName;
			}
			this.getUsers();
			this.getUsers2();
		}	
	}
};
</script>
<style scoped>
.account_zh{width:90%;margin:0 auto;}
.account_zh .di{width:100%;margin-top:20px;position:relative;left:0%;top:5%; bottom:10%;line-height:36px;}
.account_zh .zh_zeng{
	float: right;
	margin-top:0px;
	margin-bottom: 40px;
}
</style>
